<template>
  <div>
    <van-nav-bar title="分类" />
    <div class="container">
      <div class="left" :style="{height:height-50+'px'}">
        <van-sidebar v-model="activeKey" style="width: 100%;" :style="{height:height+'px'}">
          <van-sidebar-item :title="item.name" v-for="(item,index) in listdata" :key="index" :to="`/apps/listclass?id=${item._id}`" />
        </van-sidebar>
      </div>
      <div class="right">
          <router-view></router-view>
      </div>
    </div>

    <tabbar></tabbar>
  </div>
</template>

<script>
import {ygclass} from "../api"
import Tabbar from "../components/Tabbar.vue";
export default {
  components: { Tabbar },
  data() {
    return {
      activeKey: 0,
      listdata:[],
      height:0,
    };
    
  },
  mounted () {
        this.height = window.screen.height-48
        this.getlistclass()

    },
  methods: {
       async getlistclass(){
        const data = await ygclass()
        this.listdata = data.data
    },
  },
};
</script>

<style lang="scss" scoped>
.container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .left{
        width: 30%;
        overflow-y: auto;
        background-color: #f7f8fa;
    }
    .right{
        width: 70%;
    }
}
</style>